import React from 'react';
import { Modal, Button,} from 'antd';
import './index.css'
import { Divider ,Select,Checkbox} from 'antd';
import { connect } from 'react-redux'
import {placeOf} from '../../redux/findaBoat/findaBoat'
import {addChuang,chuangboList} from '../../redux/transportClass/transportDateils'
import WXLogin from '../login/WXLogin'
import WxGuanZ from './WxGuanZ'

const Option = Select.Option;
const tonnageList = ['1000','1000-2000','2001-4000','4001-6000','6001-10000','10000']
@connect(
    state => state,
    { placeOf,addChuang,chuangboList}
)

export default class AddChuangbo extends React.Component {
    constructor(){
        super();
        this.state = {
            checked:false,
            shopId:'',
            visible:false,
            visible1:false

        }
    }
    componentDidMount(){
        this.props.placeOf();
        this.props.chuangboList();
    }
    onChanges(shipId,e){
        this.setState({
            shipId:shipId,
            checked:e.target.checked
        })
    }
    handleChange1(){

    }
    handleChange(){

    }
    componentWillReceiveProps(nextProps){
        if(nextProps.transportD.addchuangbos){
            this.props.addCb2();
        }
    }
    onchuangbo(){
      this.props.addChuang(this.props.id,this.state.shipId,'n')
    }
    showModel(){
        this.setState({
         visible:!this.state.visible
        })
    }
    showModel1(){
        this.setState({
         visible1:!this.state.visible1
        })
    }
    onchuangPush(){
        if(this.props.userLogin.wx_bind === 'Y'){
            this.setState({
                visible:true
            },()=>{
              
            })
            
        }else{
            this.setState({
                visible1:true
            })
            //this.props.addChuang(this.props.id,this.state.shipId,'y')
        }
    }
    render() {
         let areaList = this.props.findLists.areaList;
         let shipList = this.props.transportD.shipList
         console.log(shipList)
        return (
           
             <div className="chuangbo">
                 <div style={{paddingTop:'10px',width:'95%'}}>
                 <Select defaultValue="全部吨位" style={{ width: 140 }} onChange={this.handleChange}>
                    {
                        tonnageList.map((item,index)=>
                                 <Option key={index} value={item}>{item}</Option>
                        )
                    }
                    
                </Select>
                <Select defaultValue="当前位置" style={{ width: 140,marginLeft:10 }} onChange={this.handleChange1}>
                    {
                        JSON.stringify(areaList) == '{}' ?'':areaList  ? '' :
                        areaList.map((item,index)=>
                             <Option  key={index}value={item.regionName}>{item.regionName}</Option>
                        )
                    }
                   
                    
                </Select>
                 </div>
                 <Divider/>
                 <div>
                    
                            <div>
                               
                                {
                                     !shipList  ? '': 
                                     shipList.map((item,index) =>
                                        <Checkbox style={{marginLeft:'20px'}} key={index} onChange={this.onChanges.bind(this,item.shipId)}>
                                        <span style={{marginLeft:'20px'}}>{item.shipName}</span>
                                        <span className='maginLeft1'>{item.tonnage}</span>
                                        <span className='maginLeft1'>查看位置</span>
                                        <span className='maginLeft1'>电话：{item.phoneNum}</span>
                                        <span className='maginLeft1'>目的地：{item.dest}</span>
                                        <span className='maginLeft1'>预计到港时间：{item.etaStd}</span>
                                        </Checkbox>
 
                                )}
                                
                            </div>
                 </div>
                 <div>
                     <Button>取消</Button>
                     <Button onClick={this.onchuangbo.bind(this)}>确定</Button>
                     <Button onClick={this.onchuangPush.bind(this)}>确定并开启运力推送</Button>
                     <WXLogin visible = {this.state.visible} showModel = {this.showModel.bind(this)}/>
                     <WxGuanZ visible1 = {this.state.visible1} showModel1 = {this.showModel1.bind(this)}/>
                 </div>
             </div>
          
        );
    }
}